<template>
  <div class="auth-record-detail">
    <div class="page-header">
      <h3>管理员授权书确认详情</h3>
    </div>

    <!-- 进度条 -->
    <div class="progress-section">
      <div class="progress-item">
        <div class="icon-wrapper submitted">
          <file-filled />
        </div>
        <div class="time">{{ record?.applyTime }}</div>
        <div class="status">已提交</div>
      </div>
      <div class="progress-line">
        <div class="dotted-line"></div>
      </div>
      <div class="progress-item" v-if="record?.auditStatus === REVIEW_STATUS.TO_BE_REVIEW.value">
        <!--根据状态显示 -->
        <div class="icon-wrapper pending">
          <hourglass-filled />
          <!-- 待审核图标 -->
        </div>
        <div class="time">{{ record?.auditTime }}</div>
        <div class="status">待审核</div>
      </div>
      <div class="progress-item" v-if="record?.auditStatus === REVIEW_STATUS.REVIEW_APPROVED.value">
        <!-- 根据状态显示-->
        <div class="icon-wrapper approved">
          <check-circle-filled />
          <!-- 审核通过图标 -->
        </div>
        <div class="time">{{ record?.auditTime }}</div>
        <div class="status">审核通过</div>
      </div>
      <div class="progress-item" v-if="record?.auditStatus === REVIEW_STATUS.REVIEW_NOT_APPROVED.value">
        <!-- 根据状态显示-->
        <div class="icon-wrapper rejected">
          <close-circle-filled />
          <!-- 审核不通过图标 -->
        </div>
        <div class="time">{{ record?.auditTime }}</div>
        <div class="status">审核不通过</div>
      </div>
    </div>

    <div class="content-wrapper">
      <!-- 基本信息 -->
      <div class="section">
        <h4 class="section-title">基本信息</h4>
        <div class="info-item">
          <span class="label">企业名称：</span>
          <span class="value">{{ query.companyName }}</span>
        </div>
      </div>

      <!-- 管理员授权书信息 -->
      <div class="section">
        <h4 class="section-title">管理员授权书信息</h4>
        <div class="info-item">
          <span class="label">管理员授权书：</span>
          <a class="view-link" :href="dynamicLink()" target="_blank">查看</a>
        </div>
      </div>

      <!-- 审核信息 -->
      <div class="section">
        <h4 class="section-title">审核信息</h4>
        <div class="info-item">
          <span class="label">审核状态：</span>
          <span class="value">{{ getStatusText(record?.auditStatus) }}</span>
        </div>
        <div class="info-item">
          <span class="label">审核意见：</span>
          <span class="value">{{ record?.advice }}</span>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="footer">
        <a-button @click="handleReturn">返回</a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { FileFilled, CheckCircleFilled } from '@ant-design/icons-vue'
  import { useRouter, useRoute } from 'vue-router'
  import { onMounted, ref } from 'vue'
  import { authRecordApi } from '/@/api/business/b-agent/enterprise/auth-record-api.js'
  import { smartSentry } from '/@/lib/smart-sentry.js'
  import { REVIEW_STATUS } from '/@/constants/business/b-agent/enterprise/enterprise-const.js'

  const router = useRouter()
  const route = useRoute()

  const record = ref(null)
  const query = ref([])
  const loading = ref(true)

  const getRecord = async () => {
    try {
      const requestBody = {
        id: query.value.id,
      }

      const queryRuselt = await authRecordApi.findById(requestBody)
      record.value = queryRuselt.data // 假设返回的数据在 data 字段中
      record.value.applyTime = formatCustomDateTime(new Date(record.value.applyTime))
      record.value.auditTime = formatCustomDateTime(new Date(record.value.auditTime))
    } catch (e) {
      smartSentry.captureError(e)
    } finally {
      loading.value = false
    }
  }

  function formatCustomDateTime(date) {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` // 自定义格式
  }

  function dynamicLink() {
    return `${query.value.authUrl}`
  }
  const getStatusText = (status) => {
    const statusMap = {
      0: '待审核',
      1: '审核通过',
      2: '审核不通过',
    }
    return statusMap[status] || '未知状态'
  }

  const handleReturn = () => {
    router.back()
  }
  onMounted(() => {
    query.value = route.query
    getRecord()
  })
</script>

<style lang="less" scoped>
  .auth-record-detail {
    background: #fff;
    min-height: 100vh;

    .page-header {
      padding: 16px 24px;
      border-bottom: 1px solid #f0f0f0;

      h3 {
        font-size: 16px;
        color: #333;
        margin: 0;
        font-weight: 500;
      }
    }

    .content-wrapper {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .progress-section {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      margin: 0 auto;
      max-width: 600px;

      .progress-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        width: 120px;

        .icon-wrapper {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 8px;
          font-size: 16px;

          &.submitted {
            background: #fff;
            color: #1890ff;
            border: 2px solid #1890ff;
          }

          &.pending {
            background: #fff;
            color: #aaa8a8;
            border: 2px solid #aaa8a8;
          }

          &.approved {
            background: #fff;
            color: #52c41a;
            border: 2px solid #52c41a;
          }

          &.rejected {
            background: #fff;
            color: #f62e3f;
            border: 2px solid #f62e3f;
          }
        }

        .time {
          font-size: 12px;
          color: #999;
          margin-bottom: 4px;
        }

        .status {
          font-size: 14px;
          color: #333;
          font-weight: 500;
        }
      }

      .progress-line {
        flex: 1;
        position: relative;
        height: 32px;

        .dotted-line {
          position: absolute;
          top: 16px;
          left: 0;
          right: 0;
          height: 2px;
          background-image: linear-gradient(to right, #1890ff 50%, transparent 50%);
          background-size: 8px 1px;
          background-repeat: repeat-x;
        }
      }
    }

    .section {
      margin-bottom: 40px;
      background: #fafafa;
      padding: 24px;
      border-radius: 4px;

      .section-title {
        font-size: 14px;
        color: #1890ff;
        font-weight: 500;
        margin: 0 0 20px 0;
        position: relative;
        padding-left: 12px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 14px;
          background: #1890ff;
          border-radius: 2px;
        }
      }

      .info-item {
        display: flex;
        margin-bottom: 16px;
        line-height: 32px;

        .label {
          width: 120px;
          text-align: right;
          color: #666;
          margin-right: 16px;
        }

        .value {
          flex: 1;
          color: #333;
        }

        .view-link {
          color: #1890ff;
          cursor: pointer;
          text-decoration: none;

          &:hover {
            color: #40a9ff;
          }
        }
      }
    }

    .footer {
      text-align: center;
      margin-top: 48px;
      padding-bottom: 24px;

      .ant-btn {
        min-width: 88px;
      }
    }
  }
</style>
